<template>
  <view>
    <view class="login-container">
      <!-- 提示登录的图标 -->
      <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
      <!-- 登录按钮 -->
      <!--  <button
              type="primary"
              class="btn-login"
              open-type="getUserInfo"
              @getuserinfo="getUserInfo1"
            >
              一键登录
            </button> -->
      <!-- 登录按钮 -->
      <button type="primary" class="btn-login" @click="getInfo">
        一键登录
      </button>
      <!-- 登录提示 -->
      <view class="tips-text">登录后尽享更多权益</view>
    </view>
  </view>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import myLoginVue from './my-login.vue';
export default {
  name: 'my-login',
  data() {
    return {};
  },
  computed: {
    ...mapState('m_user', ['redirectInfo'])
  },
  methods: {
    ...mapMutations('m_user', ['updateUserInfo', 'updateToken']),

    // getUserInfo1(e) {
    //   // 获取用户信息
    //   console.log(e);
    //   if (e.detail.errMsg !== 'getUserInfo:ok') return uni.$showMsg('登陆失败');
    //   // 把userinfo存到vuex中去：
    //   this.updateUserInfo(e.detail.userInfo);
    //   // 登录并获取token值
    //   this.getToken(e.detail);
    // },
    getInfo() {
      uni.getUserProfile({
        desc: '用户信息展示',
        success: info => {
          console.log(info);
          // 把userinfo存到vuex中去：
          this.updateUserInfo(info.userInfo);
          // 登录并获取token值
          this.getToken(info);
        },
        fail: err => {
          uni.showToast({
            title: '微信登录授权失败',
            icon: 'none'
          });
        }
      });
    },
    // 登录并获取token值:
    async getToken(info) {
      // 调用微信提供的登录接口(uni.login)
      const [err, succ] = await uni.login();
      if (err || succ.errMsg !== 'login:ok') return uni.$showMsg('登陆失败');
      // 拿着以上code以及其他四个字段一起去请求接口，他会给我们返回一个token
      const query = {
        encryptedData: info.encryptedData,
        rawData: info.rawData,
        iv: info.iv,
        signature: info.signature,
        code: succ.code
      };
      const { data } = await uni.$http.post(
        '/api/public/v1/users/wxlogin',
        query
      );
      console.log('接口数据', data);
      // 正常的代码
      // if (data.meta.status !== 200) return uni.$showMsg('登录失败');
      // this.updateToken(data.message.token)
      // 临时造的假数据 测试代码
      this.updateToken(
        'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjE2OSwiaWF0IjoxNjY3MjgzNjY1LCJleHAiOjEwMDE2NjcyODM2NjR9.Hlze0J0KDW4SIC9hUdfZAnWGxO6Pb5fZFwYwg0ZDQCg'
      );
      // 到这一步，就代表已经登陆成功了
      // 跳转回上一个页面（购物车页面）
      if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
        uni.switchTab({
          url: this.redirectInfo.from
        });
      }
    }
  }
};
</script>

<style lang="scss">
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>
